<template>
  <!-- 滚动选择器 -->
  <Top-Page>
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #backText></template>
      <template #content>选择</template>
      <template #right>
        <view class="nav-right" @click="getSelectedValues">确定</view>
      </template>
    </cu-custom>

    <!-- <view class="search-wrap">
      <input type="text" class="search" v-model="search" placeholder="搜索职位效率更高" />
      <view class="search-btn" v-show="search">搜索</view>
    </view> -->

    <picker-view
      class="picker-wrap"
      :indicator-style="indicatorStyle"
      :value="value"
      @change="bindChange"
    >
      <picker-view-column>
        <view class="item" v-for="(item, index) in columns[0]" :key="index">
          {{ item.label || item.name }}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in columns[1]" :key="index">
          {{ item.label || item.name }}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in columns[2]" :key="index">
          {{ item.label || item.name }}
        </view>
      </picker-view-column>
    </picker-view>
  </Top-Page>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import recruitApi from "@/api/recruit.js"; //招聘相关API
import { onLoad } from "@dcloudio/uni-app";
import region from "@/static/region.json";

let type = "";
let key = "children";
let keyID = "value";
let keyName = "label";
const config = uni.getStorageSync("config");
const search = ref("");
const value = ref([0, 0, 0]); // 当前选中索引
const columns = reactive([[], [], []]); // 三列数据
const indicatorStyle = "50rpx";

onLoad((param: any) => {
  type = param.type;
  key = type === "region" ? "child" : "children";
  keyID = type === "region" ? "id" : "value";
  keyName = type === "region" ? "name" : "label";

  !!config ? initData() : init();
});

const getSelectedValues = () => {
  const v = [
    columns[0][value.value[0]]?.[keyID],
    columns[1][value.value[1]]?.[keyID],
    columns[2][value.value[2]]?.[keyID],
  ].filter(Boolean);
  const label = [
    columns[0][value.value[0]]?.[keyName],
    columns[1][value.value[1]]?.[keyName],
    columns[2][value.value[2]]?.[keyName],
  ].filter(Boolean);

  const app = getApp();
  app.globalData.modifyData = {
    type: type,
    value: {
      value: v,
      label: label,
    },
  };

  uni.navigateBack();
};

const bindChange = (e: any) => {
  const newIndex = e.detail.value;
  value.value = newIndex;

  // 处理列数据变化
  const selectedL1 = columns[0][newIndex[0]];
  if (selectedL1[key]) {
    columns[1] = selectedL1[key];
    nextTick(() => {
      const selectedL2 = selectedL1[key][newIndex[1]] || selectedL1[key][0];
      if (selectedL2[key]) {
        columns[2] = selectedL2[key];
      } else {
        columns[2] = [];
      }
    });
  } else {
    columns[1] = [];
    columns[2] = [];
  }
};

function initData() {
  const data = type === "region" ? region : config[type];

  columns[0].push(...data);

  if (data[0][key]) {
    columns[1] = data[0][key];
    // 初始化第三列数据
    if (data[0][key][0][key]) {
      columns[2] = data[0][key][0][key];
    }
  }
  console.log(columns);
}

function init() {
  recruitApi.config().then((res) => {
    uni.setStorageSync("config", res.data);

    initData();
  });
}
</script>

<style lang="scss" scoped>
.nav-right {
  margin-right: 24rpx;
  color: #ff0900;
  font-size: 30rpx;
  font-weight: bold;
  letter-spacing: 1rpx;
}

.search-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12rpx;

  .search {
    flex: 1;
    padding: 24rpx;
    background: #f7f8fa;
    border-radius: 8rpx;
  }

  .search-btn {
    margin-left: 12rpx;
    line-height: 1;
    padding: 12rpx 24rpx;
    letter-spacing: 1rpx;
    color: #ff0900;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 8rpx;
  }
}
.picker-wrap {
  width: 100%;
  height: 100vh;

  .item {
    display: flex;
    align-items: center;
    padding: 0 12rpx;
  }
}
</style>
